Web Image Optimization — Before & After Gallery

Replace each example with your own work. For each technique, show a Before and an After image, then describe what you changed. Record dimensions, format, and final file size for the After image.

Crop

Goal: remove distractions and improve composition (rule of thirds, subject framing).

This is the original image of the Moon Maiden Statue. The image had unnecessary empty space around the subject.

Describe the cropped result — What you changed: cropped tighter to center the subject.

Dimensions: 1897 × 1290 px

Format: JPG

File size: 205 KB

Resize

Goal: scale the image to an appropriate display width (e.g., 1200px hero, 800px content, 400px thumbnail).

Original Sword Image — Original large image (too big for web use).

Resized Sword Image — What you changed: resized to a smaller size width for content.

Dimensions: 2392 × 1278 px

Format: JPG

File size: 311 KB

Rotate

Goal: fix horizon tilt or adjust orientation.

Original Brothers Image — Original image — horizon tilted.

Flip

Goal: create a mirrored composition or correct camera orientation if needed.

Horizontally flipped image — What you changed: flipped horizontally for better visual flow.

Dimensions: 1521 × 1112 px

Format: JPG

File size: 295 KB

Exposure / Contrast

Goal: improve clarity with basic tonal adjustments (exposure, contrast, shadows/highlights).

Underexposed original image — Original underexposed photo.

Brightened image with improved contrast — What you changed: increased exposure slightly; added contrast.

Dimensions: 1784 × 1278 px

Format: JPG

File size: 270 KB

Format / Compression

Goal: export to an efficient web format (JPG or WebP) and reduce file size while preserving quality.

Original large PNG — Original PNG (large size).

Optimized JPG or WebP — What you changed: exported as JPG/WebP at ~70–80% quality.

Dimensions: 608 × 595 px

Format: JPG

File size: 94 KB